<template>
  <section>
    <el-row style="margin: -3px 0px 0px 1px">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/system/dashboard' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>

    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" style="float:left;margin: 18px 27px -3px">
<!--        <el-form-item>
          <el-button type="primary" @click="handleAdd">新增</el-button>
        </el-form-item>-->
        <el-form-item>
          <permission-query @SearchByNameZh="listPermission" ref="searchBar"/>
        </el-form-item>
      </el-form>
    </el-col>

    <el-card style="margin: 18px 2%;width: 95%">
      <el-table
        :data="menuList"
        stripe
        :default-sort="{prop: 'id', order: 'ascending'}"
        style="width: 100%"
        :max-height="tableHeight">
        <!--Form-->
        <el-table-column prop="id" label="id" sortable/>
        <el-table-column prop="name" label="名字" fit/>
        <el-table-column prop="nameZh" label="中文名" fit/>
        <el-table-column prop="url" label="访问路径" fit/>
        <el-table-column prop="component" label="组件路径" fit/>
        <el-table-column prop="componentName" label="组件名" fit/>


        <el-table-column label="操作" width="140">
          <template slot-scope="scope">
            <el-button
              @click="editPermission(scope.row)"
              type="text"
              size="small">
              编辑
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="deletePermission(scope.row)">
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-col :span="24" class="toolbar">
        <el-col :span="24" class="toolbar">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[5, 10, 20]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </el-col>
      </el-col>
    </el-card>
    <add-or-update-permission ref="editOrAddDialog" @reload="listPermission"/>
  </section>

</template>

<script>
import AddOrUpdatePermission from "./perscomponent/AddOrUpdatePermission";
import PermissionQuery from "./perscomponent/PermissionQuery";

export default {
  name: "Permission",
  components: {PermissionQuery, AddOrUpdatePermission},
  data() {
    return {
      menuList: [],
      dialogFormVisible: false,
      size: 5,
      total: 0,
      page: 1,
      parentPermission: [],
    }
  },
  computed: {
    tableHeight() {
      return window.innerHeight - 320
    }
  },
  mounted() {
    this.listPermission();
    this.menuParent();
  },
  methods: {
    listPermission() {
      this.$axios.post("/permission/listPermission", {
        page: this.page,
        size: this.size,
        nameZh: this.$refs.searchBar.nameZh
      }).then(resp => {
        if (resp.status === 200 && resp) {
          this.menuList = resp.data.result
          this.total = resp.data.total
        }
      })
    },
    handleAdd() {
      this.$refs.editOrAddDialog.menuForm = {}
      this.$refs.editOrAddDialog.add(this.parentPermission)
      this.$refs.editOrAddDialog.dialogFormVisible = true
      this.$refs.editOrAddDialog.title = '菜单添加'
    },
    editPermission(row) {
      this.$refs.editOrAddDialog.edit(row, this.parentPermission)
      this.$refs.editOrAddDialog.title = '菜单修改'
      this.$refs.editOrAddDialog.dialogFormVisible = true
    },
    deletePermission(row) {
      this.$confirm("确定删除该权限吗？", "警告", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post("/permission/delete", row).then(resp => {
          if (resp.data.code === 200) {
            this.$message({
              message: resp.data.message,
              type: "success"
            })
          }
          if (resp.data.code === 400) {
            this.$message({
              message: resp.data.message,
              type: "warning"
            })
          }
          this.listPermission()
        })
      })
    },
    handleCurrentChange(page) {
      this.page = page
      this.listPermission()
    },
    handleSizeChange(val) {
      this.size = val
      this.listPermission()
    },
    menuParent() {
      this.$axios.get("/permission/menu/menuParents").then(resp => {
        if (resp && resp.status === 200) {
          this.parentPermission = resp.data.result
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
